<template>
	<view class="page must_know" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }"
		:id="teseShow || zhinShow || areaShow ? 'mask' : ''">
		<c-nav-bar :title="title"></c-nav-bar>
		<view class="hander">
			<view class="search-input">
				<u-search placeholder="请输入门店名称" v-model="fineVal" animation="false" @blur="blur"
					@search="search"></u-search>
			</view>
		</view>
		<view class="jd_sticky" :style="{ top: mt + 'px' }"
			:id="teseShow || zhinShow || areaShow ? 'jd_sticky_id' : ''">
			<view class="searchCondition">
				<span class="item" @click="showFood">
					<u-icon :name="!teseShow ? 'arrow-down-fill' : 'arrow-up-fill'" size="19" :label="foodTitle"
						labelPos="left" labelSize="13px" :color="!teseShow ? '' : '#007A69'"
						:labelColor="!teseShow ? '' : '#007A69'"></u-icon>
				</span>
				<span class="item" @click="showZnpx">
					<u-icon :name="!zhinShow ? 'arrow-down-fill' : 'arrow-up-fill'" size="19" :label="znpxTitle"
						labelPos="left" labelSize="13px" :color="!zhinShow ? '' : '#007A69'"
						:labelColor="!zhinShow ? '' : '#007A69'"></u-icon>
				</span>
				<span class="item" @click="showArea">
					<u-icon :name="!areaShow ? 'arrow-down-fill' : 'arrow-up-fill'" size="19" :label="areaTitle"
						labelPos="left" labelSize="13px" :color="!areaShow ? '' : '#007A69'"
						:labelColor="!areaShow ? '' : '#007A69'"></u-icon>
				</span>
			</view>
			<!--  区域筛选 -->
			<!-- <view class="contentArea" v-show="areaShow">
					<view class="box">
						<view class="item" v-for="(item, index) in area" :key="index" @click="clickareaShow(item, index)"
							:class="item.checked ? 'on' : ''">
							<view class="contentpeice" :class="{ Doublactive: item.region }">
								{{ item.scenicName }}
								<view class="xuanzhong" v-if="item.checked">
									<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
										alt="" />
								</view>
							</view>
						</view>
					</view>
					<view class="u-btn">
						<view @click="resetArea()"> 重置 </view>
						<view @click="confirmArea()"> 确定 </view>
					</view>
				</view> -->
		</view>
		<view class="list">
			<template v-if="indexList.length > 0">
				<u-cell class="spotList" @click="toHref(item)" v-for="(item, index) in indexList" :key="index">
					<u-avatar slot="icon" shape="square" size="200" :src="item.storeFrontPic.split(',')[0]"
						customStyle="border-radius:10px"></u-avatar>
					<view class="right" slot="title">
						<!-- <view class="p1">{{item.companyName}}</view> -->
						<view class="p1">{{ item.name }}</view>
						<view class="p2">
							<u-rate :count="count" size="33rpx" v-model="item.score || 5" allowHalf="true"
								activeColor="#ff8f23" readonly></u-rate>
							<view class="renjun1"> {{ item.score || 5 }}分 </view>
							<view class="renjun2"> ¥{{ item.personPrice }}/人 </view>
						</view>
						<view class="p5">
							<view class="price1">
								{{ item.categorytext }}
							</view>
							<view class="price2">
								{{ item.islandName }}
							</view>
						</view>
						<view class="p4" v-for="(item1, index1) in item.products" :key="index1">
							<block v-if="index1<2">
								<view class="money">惠</view>
								<view class="price1">
									<span>￥</span> {{ item1.discountPrice }}
								</view>
								<view class="price2">
									<span style="text-decoration: line-through">￥{{ item1.price }}</span><del></del>
								</view>
								<view class="price3">
									<u--text :lines="1" :text="item1.name"></u--text>
								</view>
							</block>
						</view>
					</view>
				</u-cell>
			</template>

			<nodata v-if="indexList.length === 0"></nodata>
		</view>

		<view :class="teseShow || zhinShow || areaShow ? 'mask_content' : ''" :style="{ top: mt + 98 + 'px' }">
			<!-- 美食分类 -->
			<view v-if="teseShow" class="pupop_box">
				<ul>
					<li v-for="item in teselist" :key="item.type" @click="teseConfirm(item)">
						<span :style="{ color: activeType === item.type ? '#007A69' : '' }">{{ item.name }}</span>
						<u-icon v-if="activeType === item.type" name="checkbox-mark" size="36" color="#007A69"></u-icon>
					</li>
				</ul>
			</view>
			<!-- <u-picker
		  :itemHeight="88"
		  :immediateChange="true"
		  :show="teseShow"
		  :columns="teselist"
		  title="美食分类"
		  keyName="name"
		  :defaultIndex="passengerDefault"
		  @cancel="teseShow = false"
		  @confirm="teseConfirm"
		></u-picker> -->
			<!-- 智能推荐 -->
			<view v-if="zhinShow" class="pupop_box">
				<ul>
					<li v-for="item in zhinlist" :key="item.id" @click="zhinConfirm(item)">
						<span :style="{ color: activeZhinType === item.id ? '#007A69' : '' }">{{ item.label }}</span>
						<u-icon v-if="activeZhinType === item.id" name="checkbox-mark" size="36"
							color="#007A69"></u-icon>
					</li>
				</ul>
			</view>

			<!-- 	<u-picker :itemHeight="88" :immediateChange="true" :show="zhinShow" :columns="zhinlist" title="智能排序"
				keyName="label" :defaultIndex="passengerDefault" @cancel="zhinShow = false"
				@confirm="zhinConfirm"></u-picker> -->
			<!-- 全部区域 -->
			<view v-if="areaShow" class="pupop_box">
				<ul>
					<li v-for="(item, index) in area" :key="item.id" @click="clickareaShow(item, index)">
						<span
							:style="{ color: activeAreaType === item.id ? '#007A69' : '' }">{{ item.scenicName }}</span>
						<u-icon v-if="activeAreaType === item.id" name="checkbox-mark" size="36"
							color="#007A69"></u-icon>
					</li>
				</ul>
			</view>
			<!-- <view class="cover" v-show="areaShow" @click="areaShow = false"></view> -->
			<view class="mask_cover" @click="hiddenCover"> </view>
		</view>
		<!-- <uni-load-more :status="status" color="#007A69" /> -->
	</view>
</template>

<script>
	import nodata from "@/compoments/NoData/index.vue";
	import uniLoadMore from "@/compoments/load-more/index.vue";
	export default {
		components: {
			nodata,
			uniLoadMore
		},
		data() {
			return {
				activeType: -1,
				activeZhinType: -1,
				activeAreaType: -1,
				// scrollTop: 0,
				// mode: 'circle',
				// iconStyle: {
				// 	fontSize: '32rpx',
				// 	color: '#2979ff'
				// },
				// showHome:false ,
				title: "全部商家",
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				fineVal: "", //餐饮搜索
				status: "more", //加载状态
				count: 5,
				num: 4,
				passengerDefault: [0],
				currentNum: null,
				sortVal: "智能排序",
				sortShow: false,
				teseShow: false,
				zhinShow: false,

				teselist: [],
				zhinlist: [{
						label: "默认排序",
						id: 1,
					},
					{
						label: "好评优先",
						id: 2,
					},
					{
						label: "高价优先",
						id: 4,
					},
					{
						label: "低价优先",
						id: 5,
					},
				],

				areaVal: "全部区域",
				areaShow: false,
				area: [{
					id: "",
					scenicName: "全部区域",
				}, ],
				titleStyle: {
					fontSize: "36rpx",
					fontWeight: "bold",
					color: "#333333",
				},

				pricesort: 0, //降序
				list: [
					"https://i.ringzle.com/file/20231125/2ad135357eec4276a8b5ac0e86112b91.png",
					"https://i.ringzle.com/file/20231125/2ad135357eec4276a8b5ac0e86112b91.png",
				],
				indexList: [],
				fromData: {
					limit: 10,
					page: 1,
					foodType: "", //（餐饮类型: 字典
					intellectSort: "", //（智能排序：1默认排序 2好评优先 3距离优先 4高价优先 5低价优先
					islandId: "", //（所属岛屿id
					merchantCategory: 4, //（商户分类: 字典MerchantCategory
					name: "", //（商户名称
					status: "", //（状态: 1审核通过 2:待审核 4:审核未通过
				},
				fromList: {
					limit: 10,
					page: 1,
				},
				AddressList: [],
				tabList: {},
				categoryMain: [],
				foodTitle: "美食分类",
				znpxTitle: "智能排序",
				areaTitle: "全部区域",
				categorytext: "",
			};
		},
		onLoad(option) {
			if (option.typeList) {
				let obj = JSON.parse(option.typeList);
				this.fromData.foodType = obj.type;
				this.activeType = obj.type;
				this.foodTitle = obj.name;
			}
			this.getHousekeeping();
			this.getAddressList();
			this.getRooms();
		},
		//下拉刷新
		// onPullDownRefresh() {},
		//上拉加载
		onReachBottom() {
			if (this.status != "noMore") {
				this.status = "loading";
				this.getRoomsList();
			}
		},
		methods: {
			hiddenCover() {
				if (this.teseShow) this.teseShow = false;
				if (this.zhinShow) this.zhinShow = false;
				if (this.areaShow) this.areaShow = false;
			},
			showFood() {
				// this.areaShow = false;
				// this.teseShow = !this.areaShow ? true : "";
				if (this.zhinShow) this.zhinShow = false;
				if (this.areaShow) this.areaShow = false;
				this.teseShow = !this.teseShow;
			},
			showZnpx() {
				// this.areaShow = false;
				// this.zhinShow = !this.areaShow ? true : "";
				if (this.teseShow) this.teseShow = false;
				if (this.areaShow) this.areaShow = false;
				this.zhinShow = !this.zhinShow;
			},
			showArea() {
				if (this.teseShow) this.teseShow = false;
				if (this.zhinShow) this.zhinShow = false;
				this.areaShow = !this.areaShow;
			},
			async getRooms() {
				let hcs = await this.getHousekeeping();
				this.$api.get("/api/merchant/food/page", this.fromData).then((res) => {
					this.indexList = res.data.data.list;

					this.indexList.forEach((item) => {
						let t = hcs.find((h) => h.dictValue == item.foodType);

						if (t) {
							item.categorytext = t.dictLabel;
						}
					});
				});
			},
			async getHousekeeping() {
				return new Promise((resolve, reject) => {
					this.$api.get("/sys/dict/type/all").then((res) => {
						if (res.data.code === 0) {
							let alldata = res.data.data.find(
								(p) => p.dictType == "food_type"
							).dataList;
							this.categoryMain = alldata.map((item, index, arr) => {
								let json = {};
								json.name = item.dictLabel;
								json.type = item.dictValue;
								json.icon =
									"https://i.ringzle.com/file/20231125/a314703e463d43c7808714d1b29632ad.png";
								return json;
							});
							// this.teselist = [this.categoryMain];
							this.teselist = [...this.categoryMain];

							resolve(alldata);
						} else reject();
					});
				});
			},

			// getHousekeeping() {
			// 	this.$api.get('/sys/dict/type/all').then(res => {
			// 		let alldata = res.data.data.find((p) => p.dictType == 'food_type').dataList;
			// 		this.categoryMain = alldata.map((item, index, arr) => {
			// 			let json = {};
			// 			json.name = item.dictLabel;
			// 			json.type = item.dictValue;
			// 			json.icon =
			// 				'https://i.ringzle.com/file/20231125/a314703e463d43c7808714d1b29632ad.png';
			// 			return json
			// 		})
			// 		this.teselist = [this.categoryMain];
			// 		this.getRooms()
			// 	})
			// },
			zhinConfirm(e) {
				this.activeZhinType = e.id;
				this.fromData.page = 1;
				this.fromData.intellectSort = e.id;
				this.znpxTitle = e.label;
				this.getRooms();
				this.zhinShow = false;
			},
			teseConfirm(e) {
				this.activeType = e.type;
				this.fromData.page = 1;
				this.fromData.foodType = e.type;
				this.foodTitle = e.name;
				this.getRooms();
				this.teseShow = false;
			},
			// 获取区域
			getAddressList() {
				this.$api.get("/api/hotel/selectScenicList", {}).then((res) => {
					res.data.data.forEach((item) => {
						this.area.push(item);
					});
					this.area.forEach((item, index) => {
						this.$set(this.area[index], "checked", false);
					});
				});
			},
			// 区域筛选
			clickareaShow(e, i) {
				// console.log(e, i, "00000");
				this.activeAreaType = e.id;
				this.areaTitle = e.scenicName;
				this.area.forEach((a, i) => {
					this.$set(this.area[i], "checked", false);
				})
				this.$set(this.area[i], "checked", !this.area[i].checked);
				if (i == 0) {
					this.area.forEach((item, index) => {
						if (index > 0 && this.area[i].checked) {
							this.$set(this.area[index], "checked", false);
						}
					});
				} else {
					this.$set(this.area[0], "checked", false);
				}
				this.confirmArea();
			},
			confirmArea() {
				let areas = this.area.map((item) => {
					if (item.checked) return item.id;
				});
				let newAreas = areas.filter((item) => item);
				// console.log(newAreas);
				this.fromData.islandId = newAreas.join(",");
				this.fromData.page = 1;
				this.indexList = [];
				this.getRooms();
				this.areaShow = false;
			},
			resetArea() {
				this.area.forEach((item, index) => {
					this.$set(this.area[index], "checked", false);
				});
				this.fromData.islandId = "";
				this.areaShow = false;
				this.getRooms();
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			// 去特色美食详情
			tabListDetails(item) {
				uni.navigateTo({
					url: "/pagesTrip/fineFood/details/tabListDetails?list=" + JSON.stringify({
						...item,
					}),
				});
			},
			// 全部商家
			navTabList() {
				uni.navigateTo({
					url: "/pagesTrip/fineFood/fineFood/tabList",
				});
			},
			// 推荐商家
			navIndexList() {
				uni.navigateTo({
					url: "/pagesTrip/fineFood/fineFood/fineFoodList",
				});
			},

			// 搜索
			search(e) {
				this.fromData.page = 1;
				this.fromData.name = e;
				this.fromData.type = "";
				this.getRooms();
				// this.fineVal = ''
			},
			// 搜索
			blur(e) {
				this.fromData.page = 1;
				this.fromData.name = e;
				this.fromData.type = "";
				this.getRooms();
				// this.fineVal = ''
			},
			getRoomsList() {
				let that = this;
				this.$api.get("/api/merchant/food/page", this.fromData).then((res) => {
					if (res.data.code === 0) {
						that.fromData.page++;
						let {
							list,
							total
						} = res.data.data;
						if (that.indexList.length + list.length > total || list.length == 0)
							return (that.isOver = true);
						that.indexList = [...that.indexList, ...list];
					} else that.$showToast(res.data.msg);
				});
			},
			// getRooms() {
			// 	this.$api.get('/api/merchant/food/page', this.fromData)
			// 		.then(res => {
			// 			this.categoryMain.forEach(obj2 => {
			// 				let obj1 = res.data.data.list.find(obj => obj.foodType == obj2.type);
			// 				if (obj1) {
			// 					obj1.foodTypename = obj2.name;
			// 				}
			// 			});
			// 			this.indexList = res.data.data.list;
			// 		})
			// },
			getList() {
				this.$api.get("/api/isspecialfood/page", this.fromList).then((res) => {
					this.tabList = res.data.data.list;
				});
			},
			//跳转详情
			toHref(item) {
				uni.navigateTo({
					url: "/pagesTrip/fineFood/details/details?list=" + encodeURIComponent(JSON.stringify({
						...item,
					})),
				});
			},
		},
	};
</script>
<style lang="less">
	::v-deep .u-text__value.u-line-1{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400 !important;
		font-size: 24rpx !important;
		color: #333333 !important;
		text-align: center;
		font-style: normal;
		padding-left: 10rpx;
		text-align: left;
	}
	
	#mask {
		height: 100%;
		position: relative;
		overflow: hidden;

		.mask_content {
			background: rgba(0, 0, 0, 0.6);
			position: absolute;
			height: 100vh;
			z-index: 99;
			flex-direction: column;
			// top: 0;
			display: flex;
			width: 100%;
		}
	}

	.searchCondition {
		// position: relative;
		background-color: #fff;
		// margin-top: 8rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		padding: 30rpx 0;

		// height: 40rpx;
		.item {
			// margin: 0 40rpx;
			min-width: 33%;

			.u-icon {
				justify-content: center;
			}
		}
	}

	.jd_sticky {
		position: sticky;
		z-index: 999;
	}

	#jd_sticky_id {
		position: initial;
	}

	.p4 {
		display: flex;
		align-items: center;
		padding-bottom: 5rpx;

		.money {
			width: 20rpx;
			height: 28rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 20rpx;
			color: #ff7d01;
			line-height: 28rpx;
			text-align: right;
			font-style: normal;
		}

		.price1 {
			height: 28rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #ff3e3e;
			line-height: 28rpx;
			text-align: center;
			font-style: normal;
			padding: 0 10rpx;

			span {
				width: 20rpx;
				height: 28rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 20rpx;
				color: #ff3e3e;
				line-height: 28rpx;
				text-align: center;
				font-style: normal;
			}
		}

		.price2 {
			span {
				height: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #999990;
				line-height: 28rpx;
				text-align: center;
				font-style: normal;
				text-decoration-line: line-through;
			}
		}

		.price3 {
			height: 28rpx;
			line-height: 28rpx;
		}
	}

	.p5 {
		display: flex;
		margin-bottom: 16rpx;

		.price1 {
			height: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #777777;
			line-height: 24rpx;
			text-align: left;
			font-style: normal;
			padding-right: 10rpx;
		}

		.price2 {
			height: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #777777;
			line-height: 24rpx;
			border-left: 1px solid #777777;
			text-align: left;
			font-style: normal;
			padding-left: 10rpx;
		}
	}

	.renjun2 {
		// height: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		// line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.renjun1 {
		// height: 24rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #fea400;
		// line-height: 32rpx;
		text-align: left;
		font-style: normal;
		margin: 0 25rpx 0 5rpx;
	}

	.u-cell__body {
		// padding: 24rpx !important;
		background-color: #fff !important;
		margin: 10rpx 18rpx !important;
		border-radius: 16rpx !important;
	}

	.u-line {
		border-color: #f5f9fa !important;
	}

	.u-scroll-list__indicator__line {
		height: 0 !important;
	}

	.u-scroll-list {
		padding-bottom: 0 !important;
	}

	.u-search {
		border: 1rpx solid #efefef !important;
		background-color: #fff !important;
		border-radius: 100rpx;

		.u-search__content {
			height: 64rpx !important;
			background-color: #fff !important;

			.u-icon__icon {
				font-size: 40rpx !important;
			}

			.u-search__content__input {
				background-color: #fff !important;
			}
		}
	}
</style>
<style scoped lang="scss">
	.mask_cover {
		flex: 1;
	}

	.pupop_box {
		width: 100%;
		background: #fff;
		position: absolute;
		top: 0;
		z-index: 99;
		padding: 0 30rpx;
		transition: top 0.4s ease;
		box-sizing: border-box;

		ul {
			li {
				padding: 22rpx 0;
				border-bottom: 1rpx solid #efefef;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				font-style: normal;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}

	::v-deep .u-avatar__image--square {
		border-radius: 16rpx !important;
	}

	.feature-three {
		padding: 16rpx 24rpx 0;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			font-size: 36rpx;
			font-weight: 600;
			color: #111;
		}

		.right {
			color: #aaaaaa;
			font-size: 24rpx;
			display: flex;
			align-items: center;
		}
	}

	.content {
		padding: 24rpx 24rpx 0;

		.content-list {
			.card {
				border-radius: 20rpx;
				width: 280rpx;
				height: 340rpx;
				margin: 20rpx 10rpx 15rpx;
				background-color: #fff;
				// box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

				.image {
					border-radius: 20rpx;
					width: 280rpx;
					height: 254rpx;

					image {
						border-radius: 20rpx;
						width: 100%;
						height: 100%;
					}
				}

				.text {
					font-size: 28rpx;
					color: #111111;
					font-weight: Bold;
					width: 100%;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
				}
			}
		}
	}

	.page {
		width: 100vw;
		box-sizing: border-box;
		background-color: #f5f9fa;
	}

	.hander {
		padding: 24rpx 24rpx 10rpx !important;
		box-sizing: border-box;
		background-color: #fff;
	}

	.search-input {
		// width: ;
		height: 64rpx;
		// padding: ;
		margin-bottom: 20rpx;
	}

	.category-main {
		// margin-top: 10rpx;
		// width: 702rpx;
		height: 150rpx;
		background: #ffffff;
		border-radius: 16rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		// align-content: center;
		.category-main-container {
			width: 90rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex-shrink: 2;
			flex-basis: 20%;
		}

		.image {
			height: 78rpx;
			width: 78rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.category-main-container text {
			margin-top: 5rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}

	.spotList {
		padding: 25rpx;
		box-sizing: border-box;
	}

	.uni-page-head {
		z-index: 1;
	}

	.u-sticky {
		top: 88rpx !important;
	}

	.cover {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.contentArea {
		width: 100%;
		padding: 48rpx 24rpx;
		box-sizing: border-box;
		position: relative;
		border-top: 1rpx solid #f3fefe;
		background-color: #fff;

		.box {
			display: grid;
			gap: 20rpx 12rpx;
			grid-template-columns: repeat(4, 1fr);

			.item {
				width: 166rpx;
				height: 68rpx;
				text-align: center;
				line-height: 68rpx;
				background-color: #f7f7fa;
				border: 2rpx solid #f7f7fa;
				color: #333;
				box-sizing: border-box;
				position: relative;
				border-radius: 12rpx;

				&.on {
					border: 2rpx solid #007a69;
					color: #007a69;
				}

				.xuanzhong {
					width: 30rpx;
					height: 25rpx;
					position: absolute;
					bottom: 0rpx;
					right: 0rpx;
					border-top-left-radius: 10rpx;
					background: #007a69;
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						width: 16rpx;
						height: 16rpx;
					}
				}
			}
		}

		.u-btn {
			display: flex;
			justify-content: space-between;
			gap: 0 30rpx;
			margin-top: 128rpx;

			view {
				width: 330rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				border-radius: 44rpx;
				font-size: 30rpx;

				&:first-child {
					border: 1rpx solid #007a69;
					color: #007a69;
				}

				&:last-child {
					color: #fff;
					background: #007a69;
				}
			}
		}
	}

	.right {
		margin-left: 26rpx;

		.p1 {
			color: #111111;
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.p2 {
			display: flex;
			margin: 16rpx 0;
			align-items: center;
		}

		.p3 {
			text {
				display: inline-block;
				padding: 6rpx;
				background-color: #fff6e6;
				font-size: 22rpx;
				color: #ff7d01;
				margin-bottom: 18rpx;
				border-radius: 4rpx;
			}
		}
	}

	.sortBox {
		.tit {
			font-size: 32rpx;
			color: #333;
			text-align: center;
			margin-bottom: 40rpx;
			margin-top: 64rpx;
		}

		.sort {
			padding: 0 24rpx 40rpx;
			background-color: #fff;
			display: grid;
			gap: 40rpx 26rpx;
			grid-template-columns: auto auto auto auto;
			margin-bottom: 44rpx;

			text-align: center;

			text {
				background-color: #f5f8fa;
				border-radius: 16rpx;
				font-size: 24rpx;
				color: #666;
				height: 64rpx;
				line-height: 64rpx;
				// box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
				box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

				&.on {
					background-image: linear-gradient(to right, #0ebffe, #00d3e8);
					color: #fff;
				}
			}
		}

		.btns {
			display: grid;
			padding: 0 30rpx 40rpx;
			gap: 0 20rpx;
			grid-template-columns: auto auto;

			.u-button--large {
				width: 94%;
				height: 40px;
			}
		}
	}
</style>